<template lang="">
    <div>
        <van-nav-bar title="患者管理" />
        <van-search  v-model="data.keywords" placeholder="请输入姓名/电话"  @search="onSearch" @cancel="onSearch" />
         <div class="top-list">
             <div class="top-item">
                <div class="top-left">
                    诊断标签
                </div>
                <div class="top-right">
                     <div class="top-tag">
                        <div class="tag-sys" v-for="tag in tags.filter(v => v.type == 1)">{{tag.name}}</div>
                     </div>
                  <div class="top-arrow">
                     <div ><van-icon name="arrow-down" /></div>
                  </div>
                </div>
             </div>
             <div class="top-item">
                <div class="top-left">其他标签</div>
                <div class="top-right">
                  <div class="top-tag"> <div class="tag" v-for="tag in tags.filter(v => v.type == 2)">{{tag.name}}</div></div>
                  <div class="top-arrow">
                     <div ><van-icon name="arrow-down" /></div>
                  </div>
                </div>
             </div>
         </div>

        <div class="list">
              <div class="family" @click="goToDetail(patient.id)" v-for="(patient,index) in patients" :key="index">
                <van-image round width="4rem" height="4rem" 
                src="/static/img/girl.png" class="img" />
                <div>
                   <div class="family-top">
                      <div class="name">{{patient.name}}</div> 
                      <div class="age">{{patient.age}}岁</div> 
                      <div></div>
                   </div>
                   <div class="tag-list">
                      <div class="tag-sys" v-for="tag in patient.tags">{{tag}}</div>
                      <div class="tag" v-for="tag in patient.tags_other">{{tag}}</div>
                   </div>
                </div>
              </div>
         </div>
         
    </div>
 </template>
<script>
import { ref, reactive,onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getPatients,getTags} from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
   setup() {
      const router = useRouter()
      const route = useRoute()
      const userInfo = getUserInfo();
      const tags = ref([])
      onMounted(() => {
         getData();
         getTags({}).then(res => {
            tags.value = res.data.list
         })
      })
      
      const goToDetail = (id) => {
         router.push("/Patient/"+id)
      }
      const goToTag = () => {
         router.push("/Tag")
      }
      const data = reactive({
         page:1,
         keywords:"",
         tag:"",
         other_tag:""
      });
      const patients = ref([])
      const getData = () => {
         getPatients(data).then(res => {
            if (res.status == 'ok') {
               res.data.list.forEach((v,i) => {
                  res.data.list[i]['tags'] = v.tags.split(",");
                  res.data.list[i]['tags_other'] = v.tags_other.split(",");
               })
               patients.value = res.data.list;
            }else{
               showToast(res.msg);
            }
         })
      }

      const onSearch = () => {
         data.page = 1;
         getData();
      }

      return {
         goToDetail,
         goToTag,
         tags,
         patients,
         data,
         onSearch
      }
   }
}
</script>
<style scoped>
.list {
   background: #F5F7FB;
   margin-bottom: 7 0px;
   height: 70vh;
   overflow-y: scroll;
}

.top-list {
   padding: 12px;
   font-size: 18px;
   color: #1C2023;
   font-weight: 250;
}

.top-item {
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #E3E4E5;
   padding: 3vw;
   margin-bottom: 10px;
}

.top-left {
   font-size: 16px;
   width: 20%;
   margin-right: 2%;
}
.top-right {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 78%;
}
.top-tag{
   display: flex;
   flex-direction: row;
}
.family {
   background: #FFFFFF;
   padding: 12px;

   display: flex;
   flex-direction: row;
   align-items: center;
}

.img {
   margin-right: 15px;
}

.family-top {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.name {
   font-size: 17px;
   margin-right: 10px;
   color: #1C2023;
   font-weight: 250;
}

.age {
   font-size: 14px;

}

.tag-list {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-top: 10px;
}
.tag {
   border: 1px solid #49B9AD;
   background: #EAFEFA;
   border-radius: 10px;
   padding: 1px 8px;
   margin-right: 10px;
   font-size: 13px;
}

.tag-sys {
   border: 1px solid #FA541C;
   background: #FFF2E8;
   border-radius: 10px;
   padding: 1px 8px;
   margin-right: 10px;
   font-size: 13px;
}
</style>